import { getModelFile } from '../api'
import './ModelList.css'

function ModelList({ models, onDelete, onRefresh }) {
    if (!models || models.length === 0) {
        return <div className="empty-state">暂无模型，点击上方按钮生成你的第一个 3D 模型吧！</div>
    }

    return (
        <div className="model-grid">
            {models.map(model => (
                <div key={model.id} className="model-card">
                    <div className="model-preview">
                        <model-viewer
                            src={getModelFile(model.id)}
                            alt={model.name}
                            auto-rotate
                            camera-controls
                            style={{ width: '100%', height: '200px' }}
                        />
                    </div>
                    <div className="model-info">
                        <h3>{model.name}</h3>
                        <p>{model.description || '暂无描述'}</p>
                        <div className="model-actions">
                            <a
                                href={getModelFile(model.id)}
                                download={`${model.name}.glb`}
                                className="btn-download"
                            >
                                下载
                            </a>
                            <button
                                onClick={() => onDelete(model.id)}
                                className="btn-delete"
                            >
                                删除
                            </button>
                        </div>
                    </div>
                </div>
            ))}
        </div>
    )
}

export default ModelList
